<template>
  <page-view class="user">
    <page-header title="用户" :show-back="true"></page-header>
    <div class="content-box">
      <div class="top">
        <van-image
          round
          width="7rem"
          height="7rem"
          lazy-load
          :src="BaseURL + store.state.userInfo.user_photo"
          class="userPhoto"
        >
          <template v-slot:loading>
            <van-loading type="spinner" size="20" />
          </template>
          <template v-slot:error>加载失败</template>
        </van-image>
        <div class="txt">
          <h2>{{ store.state.userInfo.nickName }}</h2>
          <h3>{{ store.state.userInfo.user_phone }}</h3>
        </div>
        <div class="btn">
          <van-button
            plain
            type="primary"
            size="small"
            @click="$router.push({ name: 'ChagePgoto' })"
            >修改资料</van-button
          >
        </div>
      </div>

      <van-cell-group inset>
        <van-cell title="查看菜品" value="点击跳转" is-link to="menu" />
        <van-cell title="查看订单" value="点击跳转" is-link to="order" />
        <van-cell title="查看购物车" value="点击跳转" is-link to="shopCart" />
      </van-cell-group>
    </div>
  </page-view>
</template>

<script setup>
import { useStore } from "vuex";
import { inject } from "vue";
const store = useStore();
const BaseURL = inject("BaseURL");
console.log(BaseURL + store.state.userInfo.user_photo);
</script>

<style lang="scss" scoped>
.user {
  background-color: rgb(236, 236, 236);
  .top {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding: 5px 10px 15px;
    .txt {
      margin-right: 50px;
      h2 {
        margin-top: 15px;
      }
      h3 {
        margin-top: 10px;
      }
    }
    .btn {
      padding-top: 70px;
    }
  }
}
</style>